使用laravel elixer

    npm install --global gulp  ok

    然后在安装好的laravel 下 npm install 以安装 laravel-elixir

    sublime 安装AdvancedNewFile 插件 使用ctrl+alt+n 输入路径方便新建文件(也可以手动,图方便)

 

(具体使用)在gulpfile.js 里写

var elixer = require('laravel-elixir');elixir(function(mix){    mix.sass('app.scss');});

然后命令行在此项目根目录下 gulp 自动编译开始了.

会自动保存到public/css/app.css

查找编译的路径和编译文件的路径以及其它编译选项

在node_modules/laravel-elixer/Config.js

可在这里更改,也可以(更好的方式)在gulpfile.js里重写覆盖

如关闭生成sourcemap

elixer.config.sourcemaps = false;

 

多个文件合并到一个public/css/app.css下mix.sass(['xx.scss','bb.scss']);多个分别保存到不同地方mix.sass('app.scss','public/foo/bar/app.css')   .sass('button.scss','bbb/aa/a.css');bbb...前不要加 / ,在项目根目录下生成bbb目录合并并保存到自定义路径mix.sass(['app.scss','button.scss'],'public/custom/');合并css 文件mix.styles(['sss.css','xxx.css'],'public/foo/bar/')指定合并的css文件的来源(通过传入的第三个参数指定)mix.styles(['sss.css','xxx.css'],'public/foo/bar','sources/css/');合并脚本则为(同样可以传入第三个参数指定来源)mix.styles(....);将指定文件改变版本并在页面正确引用  (main.css 变为 main-sdsk.css等防止被浏览器缓存)mix.sass(['app.scss','bbb.scss'])   .version('css/app.css');页面引用时
     note:version()内文件路径相对于在public/下 所以不用写public,变换版本后文件存在public/build/下version(['xxx.css','xxx.js']); .version()内可以使用数组 变换多个文件elixir()内文件路径相对于在public/build/下生成生产环境下的源代码gulp --production

 

   

 

过程中遇到的问题:

npm warn optional dep failed ,continuing fsevents@0.3.8    再运行一次变成了 npm warn unmet dependency    尝试npm cache clean 后再安装    仍然warn unmet .... 于是跑到它的具体缺失模块下去安装 npm install    参考 http://www.lellansin.com/npm-%E5%AE%89%E8%A3%85%E5%87%BA%E7%8E%B0-unmet-dependency-%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88.html    npm unmet dependency 的解释    http://stackoverflow.com/questions/20764881/why-does-npm-install-say-i-have-unmet-dependencies    依赖包解决方案有一点破坏,我可以尝试把 unmet的 包 装在首级    使用npm list 或者npm list parseable=true    检查 through2 由broswerfy要求^1.0.0以上 而目前版本是0.6.5    npm update through2@^1.1.0 --save    然后npm list 查看问题 再安装需要版本的 npm install browserify@11.0.1    继续npm list 查看是否有问题

 

参考: http://www.golaravel.com/laravel/docs/5.0/elixir/